<template>
	<view class="page-content">
		<view :class="['pageTitle', hasTitleBorder ? 'hasTitleBorder': '']"  :style="{ 'height': `${menuButtonBounding.bottom + 5}px`, 'position': 'relative' }">
			<view class="titleText" :style="{ 'height': `${menuButtonBounding.height}px`, 'line-height': `${menuButtonBounding.height}px`, 'bottom': '5px', 'position': 'absolute', 'width': '100%', 'text-align': 'center' }">
				{{ props.pageTitle }}
			</view>
		</view>
		<view class="searchForm" :style="{ height: `calc(360rpx - ${menuButtonBounding.bottom + 5}px)`}">
			<slot name="searchForm">
				
			</slot>
		</view>
		<view class="background-full">
			<img src="@/static/customNavbar/background-full.png" alt="" class="img" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from "vue"
	//仓库信息
	import { useSystemStore } from "@/store/useSystemStore";
	const systemStore = useSystemStore();
	let { menuButtonBounding } = systemStore

	 interface Props {
	  pageTitle: string
	  hasTitleBorder: boolean
	}

	//传递的页面标题
	const props = withDefaults(defineProps<Props>(), {
	  pageTitle: '页面标题',
	  hasTitleBorder: true
	})

</script>

<style lang="scss" scoped>
	.page-content {
		position: fixed;
		z-index: 99;
		width: 100%;
		height: 360rpx;
		left: 0;
		top: 0%;
		// background: linear-gradient(to bottom right, rgba(255, 252, 253, 1), rgba(255, 231, 237, 1), rgba(254, 252, 252, 1));
		.pageTitle{
			width: 100%;
			text-align: center;
			font-weight: bold;
			&.hasTitleBorder{
				border-bottom: 1px solid #f8f2ff;
			}
		}
		
		.background-full{
			position: absolute;
			top: 0%;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>